<template>
	<view class="whole">
		<view class="custom-navbar">
			<view class="left" >
				<image class="iconfont icon-xiangzuojiantou " @click="goBack"></image>
			</view>
			<view class="center">{{ title }}</view>
		</view>
		<scroll-view
		      class="content"
		      :scroll-y="true"
		    >
			<view class="header">
				<view class="title">{{blogTitle}}</view>
				
				<view v-if="coverOption === 'single'" class="cover"  @click="chooseImageAndUpload">
					<image v-if="imageUrl" :src="imageUrl" class="cover-image"></image>
					<image v-else class="iconfont icon-jia " ></image>
					<text>上传图片</text>
					<view v-if="imageUrl" class="clear-icon-bg">
					 <text class="clear-icon" @click.stop="clearImage">×</text>
					 </view>
				</view>
				
			</view>
			 <view class="cover-settings">
			    <view class="settings-row">
					 <view class="color-dot"></view> <!-- 添加橘色点 -->
			        <view class="settings-title">封面设置</view>
			        <view class="custom-radio-group">
			            <view 
			                class="custom-radio" 
			                :class="{ active: coverOption === 'none' }" 
			                @click="coverOption = 'none'">
			                <text :class="{ 'selected-text': coverOption === 'none' }">无封面</text>
			            </view>
			            <view 
			                class="custom-radio" 
			                :class="{ active: coverOption === 'single' }" 
			                @click="coverOption = 'single'">
			                <text :class="{ 'selected-text': coverOption === 'single' }">单图</text>
			            </view>
			        </view>
			    </view>
			 </view>
			

			 <view class="article-type-selector">
			    <view class="settings-row">
					 <view class="color-dot"></view> <!-- 添加橘色点 -->
			        <view class="settings-title">文章类型</view>
			        <view class="custom-radio-group">
			            <view 
			                class="custom-radio" 
			                :class="{ active: articleType === 'original' }" 
			                @click="articleType = 'original'; showReprintUrl = false;">
			                <text :class="{ 'selected-text': articleType === 'original' }">原创</text>
			            </view>
			            <view 
			                class="custom-radio" 
			                :class="{ active: articleType === 'reprint' }" 
			                @click="articleType = 'reprint'; showReprintUrl = true;">
			                <text :class="{ 'selected-text': articleType === 'reprint' }">转载</text>
			            </view>
			            <view 
			                class="custom-radio" 
			                :class="{ active: articleType === 'translation' }" 
			                @click="articleType = 'translation'; showReprintUrl = true;">
			                <text :class="{ 'selected-text': articleType === 'translation' }">翻译</text>
			            </view>
			        </view>
			    </view>
			    <view v-if="showReprintUrl" class="reprint-url">
			        <view class="reprint-url-row">
			            <view v-if="articleType === 'reprint'" class="color-dot"></view> <!-- 添加橘色点 -->
			            <text>原文地址:</text>
			            <input type="text" v-model="originalUrl" placeholder="" />
						<image  class="iconfont icon-cuowu2 " @click="clearInput"  ></image>
			        </view>
			    </view>
			</view>
			
			  <view class="tag-selector">
			        <view class="settings-row">
			            <view class="color-dot"></view> <!-- 添加橘色点 -->
			            <text class="settings-title">选择标签</text>
			        </view>
			        <view class="select-area" >
			            <text class="placeholder-text">{{  saveedTags.length > 0 ?`已选择 ${ saveedTags.length} 个标签` : '请选择' }}</text>
			           <image  class="iconfont icon-xiangyoujiantou "@click="toggleDropdown" ></image>
			        </view>
			  </view>
			  
			  
			   <!-- 新增博客描述输入框 -->
			      <view class="blog-description">
			         <text class="settings-title">博客描述</text>
			         <textarea
			           class="description-text"
			           v-model="blogDescription"
			           placeholder="请输入博客描述（最多150字）"
			           @input="checkDescriptionLength"
			           rows="3"  
			           maxlength="150"  
			         ></textarea>
			          <text class="description-length">{{ descriptionLength }}/150</text>
			      </view>
			  
		 </scroll-view>
		<!-- 背景的过渡效果 -->
		  <view   :class="['modal-background', { 'fade-out':  !dropdownVisible, 'fade-in':  dropdownVisible}]"></view>
		<!-- 评论内容的滑动效果 -->
		 <view  :class="['modal', { 'slide-in':  dropdownVisible, 'slide-out': ! dropdownVisible }]" :style="{ 
        bottom: isKeyboardVisible ? (keyboardHeight + 'px') : '0', 
        height: modalHeight 
      }">
			  <view class="modal-content" >
				  <view class="header">
					  <image  class="iconfont icon-cuowu "  @click="closeDropdown" ></image>
					   <text class="modal-title">选择标签</text>
					  <view class="save-button" @click="saveTags">保存</view>
				  </view>
				  
				   <!-- 展示选中的标签 -->
				    <view class="selected-tags" v-if="selectedTags.length != 0">
				        <view v-for="tag in selectedTags" :key="tag" class="tag-item">
				           <text>{{ tag }}</text>
				          <image class="iconfont icon-cuowu" @click="removeTag(tag)"></image>
				        </view>
				    </view>
				  
				  <!-- 输入框，用于关键词模糊查询 -->
				    <view class="search-container">
				        <input v-model="searchQuery" placeholder="输入关键词进行搜索" class="search-input" />
						<image :class="searchQuery.length === 0 ? 'iconfont icon-sousuo' : 'iconfont icon-cuowu2'" 
      @click="clearSearchQuery"></image>
				    </view>
				  
				  <view v-if="searchQuery.length===0" class="other-content">
					  <!-- 展示已选中的标签数量 -->
					    <view class="selected-tags-info" v-if="selectedTags.length !== 0">
					        <text>{{ selectedTags.length }}/{{ totalTags }}</text>
					    </view>
						 <!-- 为你推荐的头部 -->
						<view class="recommendation-header">
						    <text class="recommendation-title">为你推荐</text>
						    <view class="change-button" @click="changeRecommendations">
						        <text>换一换</text>
						        <image class="iconfont icon-tihuan"></image> <!-- 替换为您的换一换图标 -->
						    </view>
						</view>
						<!-- 可滑动的标签列表 -->
						    <view class="tags-container">
						      <view class="tag-item" v-for="tag in recommendedTags" :key="tag"
							  :class="{ 'selected': selectedTags.includes(tag) }"
							 @click="toggleTag(tag)"
							  >
						        <text>{{ tag }}</text>
						      </view>
						    </view>
				  </view>
				  
				  
				   <!-- 当 searchQuery 长度大于 0 时，展示查询结果 -->
				      <view v-if="searchQuery.length > 0" class="search-results">
				        <!-- 展示匹配的标签列表 -->
				        <view class="tags-container">
				          <view class="tag-item" v-for="tag in filteredTags" :key="tag" 
						  :class="{ 'selected': selectedTags.includes(tag) }" 
						 @click="toggleTag(tag)"
						  >
				            <text>{{ tag }}</text>
				          </view>
				        </view>
				      </view>
			   </view>
		  </view>
		 <!-- 底部区域 -->
		<view class="bottom-bar">
		    <button class="draft-button" @click="saveDraft">保存草稿</button>
		    <button class="publish-button" @click="publishContent">发布内容</button>
		</view>
	</view>
</template>

<script>
	import request from "../../utils/request.js";
	import file from "../../utils/file.js";
	export default {
		data() {
			return {
				userId:undefined,
				token:undefined,
				 title:'设置',
				 blogTitle:'',
				 imageUrl: '' ,// 存储选择的图片 URL
				coverOption: 'single' ,// 默认选择单图
				articleType: 'original', // 默认文章类型
				showReprintUrl: false, // 控制原文地址输入框的显示
				originalUrl: '' ,// 存储原文地址
				blogDescription: '',
				descriptionLength: 0,
				blogData:{},
			//	tepPostId:'',
				 dropdownVisible: false ,// 控制下拉菜单的显示
				 saveedTags: [], // 存储已选择的标签
				 selectedTags: [], // 存储已选择的标签
				 searchQuery:'',//搜素关键字
				 totalTags:5,//总选择标签
				 recommendedTags:[],//推荐的标签
				 allTags: [],  // 所有可用标签
				 tagsPerBatch: 20,  // 每次展示的标签数
				 currentIndex: 0,   // 当前标签批次的起始索引
				filteredTags: [],	// 搜索结果
				isKeyboardVisible: false, // 用来跟踪键盘是否显示
				keyboardHeight: 0, // 键盘的高度
				modalHeight: '100vh',      // 初始模态框高度为 100vh
			};
		},
		onLoad(options) {
			const resourceId = decodeURIComponent(options.resourceId);  // 解码
			  const resourceIdNumber = Number(resourceId);  // 转换为数字类型
		       const blogTitle = decodeURIComponent(options.blogTitle);  // 解码 blogTitle
		        let imgFileName = decodeURIComponent(options.imgFileName);  // 解码 imgFileName
		         imgFileName = imgFileName ? imgFileName.split(',') : [];  // 转换为数组，如果没有数据，赋值为空数组
		        const draftId = options.draftId;  // tepPostId 不需要解码
		        const blogContent = options.blogContent; 
				let blogText= decodeURIComponent(options.blogText);  // 解码 blogContent 
				 this.blogTitle=blogTitle;
		          // 输出接收到的数据
		          console.log("Blog Title:", blogTitle);
		          console.log("Image File Names:", imgFileName);
		          console.log("draftId:", draftId);
		          console.log("Blog Content:", blogContent);
				  console.log(" resourceId",resourceIdNumber);
				  console.log("博客文本内容",blogText);
				  blogText=blogText.slice(0, 150);
		        const blogData = {
		              title: blogTitle,
		              imgFileName: imgFileName,
		              draftId: draftId,
		              content: blogContent,
					  resourceId:resourceIdNumber,
					  blogText:blogText
		            };
					this.blogData=blogData;
		 },
		async mounted() {
		    this.addKeyboardListeners();
			this.userId=uni.getStorageSync("UID");
			this.token=uni.getStorageSync("token");
			await this.fetchBlogSetting();
			await this.loadImage();
		  },
		 watch: {
		    // 监听 searchQuery 的变化
		    searchQuery(newQuery) {
		      if (newQuery.length > 0) {
		        // 如果查询长度大于0，调用 handleSearch 来触发请求
		        this.handleSearch();
		      } else {
		        // 如果查询为空，则清空结果
		        this.filteredTags = [];
		      }
		    },
		  },
		methods:{
			checkDescriptionLength() {
			            // 更新描述长度
			            this.descriptionLength = this.blogDescription.length;
			            if (this.descriptionLength > 150) {
			                this.blogDescription = this.blogDescription.slice(0, 150); // 限制最大长度为 100
			                this.descriptionLength = 150; // 更新显示的长度
			            }
			        },
			async fetchBlogSetting(){
				try{
					//查询blog草稿的设置
					let data={
						draftId:this.blogData.draftId,
						 userId:this.userId,
						 resourceId:this.blogData.resourceId
					}
					//console.log(data);
					 let result=await request.sendUniPostRequestByNetWork(this.userId,this.token,"searchDraft",data,"/draft/searchDraftOtherDetails");
					 console.log("加载的页面数据",result);
					 if(result){
					 	if(result.code===1){
							const data=result.data;
							 // console.log(data,data.articleType,data.coverOption,data.originalUrl,data.tagsNames);
							  if (data!=undefined &&data.description!=undefined&& data.articleType!=undefined && data.coverOption!=undefined && data.originalUrl!=undefined && data.tagsNames!=undefined) {
								  console.log("初始化设置");
								this.articleType=data.articleType;
								this.coverOption=data.coverOption;
								this.originalUrl=data.originalUrl;
								this.blogDescription=data.description;
								this.checkDescriptionLength();
								this.showReprintUrl=(this.articleType==='reprint' || this.articleType==='translation');
								
								// 清除 data.tagsNames 中的空字符串
								this.saveedTags = data.tagsNames.filter(tag => tag !== '');
								
							}
						}
						return;
					 }
					 uni.showToast({
					        title:"请求失败，请重试", // 使用 error.message 作为提示信息，若没有则使用默认提示
					        icon: 'error', // 使用 'error' 图标
					        duration: 2000 // 持续时间
					    });
				}catch (error) {
			      console.error("查找失败:", error);
				   uni.showToast({
				          title: error.message || "发生错误", // 使用 error.message 作为提示信息，若没有则使用默认提示
				          icon: 'error', // 使用 'error' 图标
				          duration: 2000 // 持续时间
				      });
			    }
			},
			async loadImage() {
				console.log("加载临时图片封面"); 
				const url = `${this.baseUrl}/file/${this.blogData.draftId}?type=tempPostCover`;
				console.log("请求的图片路径:", url);
				let result=await request.sendUniGetRequestByNetWork(this.userId,this.token,url);
				console.log("草稿封面图片请求的数据:",result);
				if(result){
					if(result.code===1){
						let imgResult=result.data;
						if(imgResult){
							if(imgResult.imgType && imgResult.fileContent){
								const src=file.generateImagUrl(imgResult.fileContent,imgResult.imgType);
								
								this.imageUrl=src;
								 return;
							}
						}
					}
					return;
				}
				uni.showToast({
				       title: "图片加载失败", // 使用 error.message 作为提示信息，若没有则使用默认提示
				       icon: 'error', // 使用 'error' 图标
				       duration: 2000 // 持续时间
				   });
			},
			 async fetchTagsFromServer() {
			    try {
				  if(this.allTags.length!=0){
					  return;
				  }
			      let url = this.baseUrl + "/tag/getAllTags";
			      let result=await request.sendUniGetRequestByNetWork(this.userId,this.token,url);
				  console.log(result);
			       if(result){
			       	if(result.code===1){
			       		const data=result.data;
			       		  if (Array.isArray(data)) {
			       		          // 确保 data 是数组
			       		          this.allTags = data;  // 更新 filteredTags
								  this.loadNextBatchOfTags();
			       		 } else {
			       		    console.warn("返回的数据不是一个数组");
			       		    this.allTags  = [];  // 如果返回的数据不是数组，清空标签列表
			       		}
			        }
			       }else{
					    this.allTags  = []; 
				   }
				   
			    } catch (error) {
			      console.error("搜索请求失败:", error);
			      this.allTags  = [];  // 出错时清空结果
			    }
			  },
			 // 监听键盘事件
			    addKeyboardListeners() {
			      if (uni) {
			        uni.onKeyboardHeightChange(res => {
			          if (res.height > 0) {
			            // 键盘弹出时，获取键盘的高度并调整模态框的位置
			            this.isKeyboardVisible = true;
			            this.keyboardHeight = res.height;
						// 动态计算模态框的新高度
						  const screenHeight = uni.getSystemInfoSync().screenHeight; // 获取屏幕高度
						  this.modalHeight = `${screenHeight - this.keyboardHeight}px`; // 模态框高度减去键盘高度
			          } else {
			            // 键盘收起时，恢复模态框位置
			            this.isKeyboardVisible = false;
			            this.keyboardHeight = 0;
						 this.modalHeight = '100vh';  // 恢复为屏幕高度
			          }
			        });
			      }
			    },
			chooseImage() {
			  return new Promise((resolve, reject) => {
			    uni.chooseImage({
			      count: 1, // 默认选择的图片数量
			      sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图
			      sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机
			      success: (res) => {
			        const tempFilePaths = res.tempFilePaths;
			        resolve(tempFilePaths);
			      },
			      fail: (err) => {
			        reject(err);
			      }
			    });
			  });
			},
			// 上传单张图片，支持传递自定义的 URL、数据和头部
			uploadImage(filePath, url, data = {}, header = {}) {
			  return new Promise((resolve, reject) => {
			    uni.uploadFile({
			      url: url, // 使用传入的 URL
			      filePath: filePath,
			      name: 'file', // 后端接收文件的字段名
			      formData: {
			        ...data // 扩展其他额外的数据
			      },
			      header: {
			        ...header // 扩展自定义的头部
			      },
			      success: (res) => {
			        try {
			          const resultData = JSON.parse(res.data); // 假设服务器返回的结果是 JSON 格式
			          resolve(resultData); // 返回上传成功的数据
			        } catch (error) {
			          reject('解析返回数据失败'); // 解析失败处理
			        }
			      },
			      fail: (err) => {
			        reject(err); // 上传失败处理
			      }
			    });
			  });
			},
			uploadImages(images, url, data = {}, header = {}) {
			  // 使用 map 遍历每个图片，并将索引传递到 data 中
			  const uploadPromises = images.map((image, index) => {
			    // 在上传时给 data 添加一个新的属性，表示是第几张图片
			    const updatedData = { ...data, imageIndex: index + 1 }; // imageIndex 为图片的索引，从 1 开始
			    return this.uploadImage(image, url, updatedData, header);
			  });
			
			  return Promise.all(uploadPromises) // 返回所有上传的结果
			    .then(results => {
			      // 所有图片上传成功后的处理
			      return results; // 返回所有上传成功的结果
			    })
			    .catch(err => {
			      // 处理上传失败的情况
			      console.error('上传失败:', err);
			      throw err; // 抛出错误以便外部捕获
			    });
			},
			//选择图片并上传
			async chooseImageAndUpload() {
			  try {
			    const tempFilePaths = await this.chooseImage();
				uni.showLoading({
				    title:'加载中'
				})
			   const url = this.baseUrl+"/file/upload"; // 自定义上传的 URL
			   console.log("前面的博客数据:",this.blogData);
			     const data = {
			       userId: this.userId,
				   signId:this.blogData.draftId,
				   type:'tempPostCover'
			     };
				 const header = {
				    uid:this.userId,
					token:this.token
				   };
			    const uploadedImages = await this.uploadImages(tempFilePaths, url, data,header);
			    // 处理上传成功的图片 URL
			    
				  // 遍历 uploadedImages，根据 imageIndex 找到对应的占位符并替换为图片 URL
				uploadedImages.forEach(result => {
					if(result){
						console.log('成功上传的图片:', result);
						if(result.code===1){
							const imageData=result.data;
							if(imageData.imageIndex && imageData.storageFileName ){
								console.log(imageData.imageIndex, imageData.storageFileName);
								 // 将 imageIndex 转换为数字
								 const imageIndex = parseInt(imageData.imageIndex, 10);
								
								   // 确保索引有效
								if (!isNaN(imageIndex) && imageIndex-1 >= 0 && imageIndex-1 < tempFilePaths.length) {
								    // 找到对应的 tempFilePaths 中的 URL
								    this.imageUrl = tempFilePaths[imageIndex-1];
								} else {
								    console.warn('第imageIndex张:', imageData.imageIndex);
								}
							}
						}else{
							if(result.msg){
								const imageData=result.data;
								if(imageData){
									if(imageData.imageIndex ){
										const error = "第"+imageData.imageIndex+"张图片"+result.msg;
									 uni.showToast({
									        title:error , // 使用 result.msg 作为提示信息
									        icon: 'none', // 使用 'none' 图标
									        duration: 2000 // 持续时间
									});
									return;
									}
								}
								uni.showToast({
								        title:result.msg, // 使用 result.msg 作为提示信息
								        icon: 'none', // 使用 'none' 图标
								        duration: 2000 // 持续时间
								});
							}
							
						}
					}
				  // 你需要确保占位符的 selector 里有正确的 `data-index` 属性来匹配 imageIndex
				  //this.insertImageIntoEditor(imageData.imageIndex, imageData.imageUrl);
				});
			    //return uploadedData; // 返回上传成功的数据
			  } catch (error) {
			    throw error; // 抛出错误以便外部捕获
			  }finally{
				  uni.hideLoading();
			  }
			},
			clearImage() {
			     this.imageUrl = ''; // 清除图片
		    },
			goBack(){
			 uni.navigateBack();
			 
			 },
			  // 通用的条件校验方法
			     validateFields() {
			         if (this.coverOption === 'single' && this.imageUrl==='') {
			             uni.showToast({
			                 title: '封面不能为空',
			                 icon: 'none',
			                 duration: 2000
			             });
			             return false; // 校验不通过，返回 false
			         }
			 
			         //如果 articleType 是 'reprint'，并且 originalUrl 为空，则提示原文地址不能为空
			         if (this.articleType === 'reprint' && this.originalUrl==='') {
			             uni.showToast({
			                 title: '原文地址不能为空',
			                 icon: 'none',
			                 duration: 2000
			             });
			             return false; // 校验不通过，返回 false
			         }
			 
			         // 如果 savedTags 数组为空，则提示请添加标签
			         if (this.saveedTags.length === 0) {
			             uni.showToast({
			                 title: '请添加标签',
			                 icon: 'none',
			                 duration: 2000
			             });
			             return false; // 校验不通过，返回 false
			         }
			 
			         return true; // 所有校验通过，返回 true
			     },
			async  saveDraft() {
				   if (!this.validateFields()) {
				         return; // 如果校验失败，停止执行后续逻辑
				     }
				try {
					// const blogData = {
					//       title: blogTitle,
					//       imgFileName: imgFileName,
					//       draftId: draftId,
					//       content: blogContent,
					// 	  resourceId:resourceIdNumber
					//     };
					
					let data={
						draftId:this.blogData.draftId,
						userId:this.userId,
					    resourceId:this.blogData.resourceId,
						title:this.blogData.title,
						content:this.blogData.content,
						coverOption:this.coverOption,
						articleType:this.articleType,
						originalUrl:this.originalUrl,
						saveedTags:this.saveedTags,
						description:this.blogDescription,
						type:"saveAll"
						//type:"saveTitleAndContent",
					}
					let result=await request.sendUniPostRequestByNetWork(this.userId,this.token,"saveDraft",data,"/draft/saveDraft");
					console.log(result);
					if(result){
						if(result.code===1){
						uni.showToast({
						       title:"保存成功", // 使用 error.message 作为提示信息，若没有则使用默认提示
						       icon: 'success', // 使用 'error' 图标
						       duration: 1000 // 持续时间
						   });
						   setTimeout(() => {
						     uni.switchTab({
						        url: '/pages/index/index' // 跳转到 tabBar 页面
						      });
						   }, 1000);
						// 处理保存草稿的逻辑
						console.log('草稿已保存');
						return;
						}
					}
					uni.showToast({
					       title:"保存失败", // 使用 error.message 作为提示信息，若没有则使用默认提示
					       icon: 'error', // 使用 'error' 图标
					       duration: 2000 // 持续时间
					   });
					
				} catch (error) {
					uni.showToast({
					  title: '保存失败',
					  icon: 'none'
					});
				}
			 },
		async	publishContent() {
				 if (!this.validateFields()) {
				            return; // 如果校验失败，停止执行后续逻辑
				        }
						
				try {
					if(this.blogData.blogText.trim().length===0&&this.blogData.content.trim()==='<p><br></p>'){
						uni.showToast({
						       title:"内容不能为空", // 使用 error.message 作为提示信息，若没有则使用默认提示
						       icon: 'error', // 使用 'error' 图标
						       duration: 1000 // 持续时间
						   });
						   return;
					}
					let description=this.blogDescription;
					if(!this.blogDescription){
						description=this.blogData.blogText;
					}
					// const blogData = {
					//       title: blogTitle,
					//       imgFileName: imgFileName,
					//       draftId: draftId,
					//       content: blogContent,
					// 	  resourceId:resourceIdNumber
					//     };
					let data={
						draftId:this.blogData.draftId,
						userId:this.userId,
					    resourceId:this.blogData.resourceId,
						title:this.blogData.title,
						content:this.blogData.content,
						coverOption:this.coverOption,
						articleType:this.articleType,
						originalUrl:this.originalUrl,
						saveedTags:this.saveedTags,
						description:description,
						type:"release"
						//type:"saveTitleAndContent",
					}
					let result=await request.sendUniPostRequestByNetWork(this.userId,this.token,"saveDraft",data,"/draft/saveDraft");
					console.log(result);
					if(result){
						if(result.code===1){
						uni.showToast({
						       title:"发布成功", // 使用 error.message 作为提示信息，若没有则使用默认提示
						       icon: 'success', // 使用 'error' 图标
						       duration: 1000 // 持续时间
						   });
						   setTimeout(() => {
						     uni.switchTab({
						        url: '/pages/index/index' // 跳转到 tabBar 页面
						      });
						   }, 1000);
						// 处理发布内容的逻辑
						console.log('内容已发布');
						return;
						}
					}
					uni.showToast({
					       title:"发布失败", // 使用 error.message 作为提示信息，若没有则使用默认提示
					       icon: 'error', // 使用 'error' 图标
					       duration: 2000 // 持续时间
					   });
					
				} catch (error) {
					uni.showToast({
					  title: '发布失败'+error.message,
					  icon: 'none'
					});
				}
			},
			
			
			 clearInput() {
			    this.originalUrl = ''; // 清空输入框
			 },
			  toggleDropdown() {
			    this.dropdownVisible= true; // 切换下拉菜单的显示状态
				this.fetchTagsFromServer();
				this.selectedTags=[...this.saveedTags];
			 },
			  closeDropdown() {
				 this.selectedTags=[];
				 console.log(this.saveedTags);
				 this.dropdownVisible = false;
			 },
			saveTags() {
			    // 在这里处理保存逻辑
			    console.log('保存的标签:', this.selectedTags);
				this.saveedTags = [...this.selectedTags];  
				this.dropdownVisible = false;
			},
			 removeTag(tag) {
			        const index = this.selectedTags.indexOf(tag);
			        if (index !== -1) {
			            this.selectedTags.splice(index, 1);
			        }
			    },
				 changeRecommendations() {
					 if(this.allTags.length<=this.tagsPerBatch){
						 uni.showToast({
						   title: '无更多标签可换',
						   icon: 'none',
						   duration: 1500
						 });
						 return;
					 }
				      // 换一换的逻辑
				      console.log('换一换');
					   this.loadNextBatchOfTags();  // 加载下一个批次的标签
				      // 这里可以更改 recommendedTags 的内容
				    },
					 // 加载下一批标签
					  loadNextBatchOfTags() {
					    // 计算下一个批次的标签
					    const endIndex = this.currentIndex + this.tagsPerBatch;
					    // 获取当前批次的标签
					    const batch = this.allTags.slice(this.currentIndex, endIndex);
					    this.recommendedTags = batch;
					
					    // 更新 currentIndex，准备加载下一批标签
					    if (endIndex >= this.allTags.length) {
					      // 如果已经展示完所有标签，重置 currentIndex
					      this.currentIndex = 0;
					    } else {
					      // 否则，继续向后展示
					      this.currentIndex = endIndex;
					    }
					  },
					// 切换标签的选择状态
					    toggleTag(tag) {
					       if (!this.selectedTags.includes(tag) && this.selectedTags.length < 5) {
					         // 添加标签
					         this.selectedTags.push(tag);
					       } else if (this.selectedTags.includes(tag)) {
					         // 如果标签已经被选中，则从 selectedTags 中移除
					         this.selectedTags = this.selectedTags.filter(item => item !== tag);
					       } else {
					         // 如果 selectedTags 已经有 5 个标签，阻止添加更多标签
					         uni.showToast({
					           title: '最多只能选择 5 个标签',
					           icon: 'none',
					           duration: 1500
					         });
					       }
					    },
			  // 清空搜索框内容
			    clearSearchQuery() {
			      this.searchQuery = ''; // 清空搜索框
			    },
				 // 处理输入的查询，调用后端接口
				handleSearch() {
					if (this.searchQuery.trim() === "") {
					           this.filteredTags = [];  // 清空搜索结果
					           return;
					   }
									    
					// 调用后端接口进行搜索
					 this.searchTags(this.searchQuery);  // 调用搜索 API
				},
				
				 async searchTags(query) {
				     if (query.length > 0) {
				          // 用户输入了搜索关键词
				          this.filteredTags = this.allTags.filter(tag => tag.toLowerCase().includes(query.toLowerCase()));
				        } else {
				          // 清空搜索框时恢复所有标签
				          this.filteredTags = [];
				        }
				}
		}
	}
</script>

<style lang="scss">

.whole{
	display: flex;
	flex-direction: column; // 确保子元素垂直排列
	 height: 100vh;
	 background-color: rgba(0, 0, 0, 0.04);
	// overflow: hidden;
.modal-background {
  position: fixed; /* 固定定位，覆盖整个页面 */
  top: 0;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.2); /* 黑色背景，透明度为0.3 */
  z-index: 998; /* 背景层次在内容下方 */
  opacity: 0;
  transform: translateY(100%);
  transition:  opacity 0.1s ease; /* 添加过渡效果 */
}

.modal-background.fade-in {
  transform: translateY(0); /* 滑入 */
  opacity: 1; /* 完全可见 */
}

/* 滑出效果 */
.modal-background.fade-out {
	transform: translateY(100%); /* 滑入 */
    opacity: 0; /* 完全透明 */
}
.modal {
  
  position: fixed;
  bottom: 0;
   bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: flex-end; /* 从底部对齐 */
  z-index: 9999; /* 确保模态框位于最上层 */
  /* 初始状态为隐藏 */
  transform: translateY(100%);
  opacity: 0;
  transition: transform 0.5s ease, opacity 0.5s ease; /* 添加过渡效果 */
  /* 内容区域样式 */
  
  .modal-content{
	
    background-color: white;
    padding: 20rpx;
    border-radius: 30rpx;
    width: 100%;
    height: 70%; /* 最大高度 */
    box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1);
    display: flex;
    flex-direction: column; /* 纵向布局 */
    position: relative;
	.header{
		padding: 10rpx;
		height: 50rpx;
		display: flex; /* 使用flex布局 */
		align-items: center; /* 垂直居中对齐 */
		 justify-content: space-between; /* 左右对齐 */
		.icon-cuowu{
			margin-right: 10rpx;
				//background-color: red;
			  color: #000;
			  font-size: 40rpx;
			  width: 40rpx;
			  height: 40rpx;
			  text-align: center;
			  line-height: 40rpx;
		}
		.modal-title {
		    flex: 1; /* 占据剩余空间 */
		    text-align: center; /* 中间对齐 */
		    font-size: 18px; /* 字体大小 */
		}
		.save-button {
			color: #000;
			border: 1rpx solid #ccc;
			width: 100rpx;
			height: 50rpx;
			line-height: 50rpx;
			text-align: center;
		    border-radius: 20rpx; /* 圆角效果 */
		    cursor: pointer; /* 鼠标指针样式 */
		}
	}
	

	.selected-tags {
		 display: flex; /* 使用 flexbox 布局 */
		flex-wrap: wrap; /* 允许换行 */
		//padding: 10rpx; /* 内边距 */
	   padding: 10rpx; /* 内边距 */
	   margin-top: 20rpx;
		.tag-item {
			//background-color: #ff6a00;
			display: flex;
			//max-width: auto;
			border: 1px solid #ccc; /* 边框 */
		    align-items: center; /* 垂直居中对齐 */
		    padding: 5px 10px; /* 标签内边距 */
		    border-radius: 30px; /* 圆角 */
		   // margin: 5rpx; /* 标签之间的间距 */
		}
		
		.icon-cuowu {
			//background-color: #FF3B30;
		    width: 16px; /* 图标宽度 */
		    height: 16px; /* 图标高度 */
		    margin-left: 8px; /* 图标与文本之间的间距 */
		    cursor: pointer; /* 鼠标指针样式 */
		}
	}
	.search-container{
		padding: 10rpx;
		border-bottom: 1px solid #ccc; /* 边框 */
		display: flex;
		align-items: center;
		.search-input{
			flex: 1;
		}
		.iconfont{
			color: #000;
			font-size: 50rpx;
			width: 50rpx;
			height: 50rpx;
			text-align: center;
			line-height: 50rpx;
		}
	}
	.other-content{
		//width: 100%;
		flex: 1;
		//background-color: #FF3B30;
		display: flex;
		flex-direction: column; /* 纵向布局 */
		 //position: relative;
		.selected-tags-info{
			padding: 10rpx;
			//margin: 10px 0; /* 上下外边距 */
			font-size: 14px; /* 字体大小 */
			 color: #333; /* 字体颜色 */
		}
		.recommendation-header {
		  display: flex;
		  justify-content: space-between;
		  //align-items: center;
		  padding: 10px;
		  //background-color: #f5f5f5; /* 背景颜色 */
		  .recommendation-title {
		    font-size: 18px;
		   // font-weight: bold;
		  }
		  .change-button {
		    display: flex;
		    align-items: center;
		    cursor: pointer;
			//color: #ccc;
		     .iconfont{
		    	font-size: 50rpx;
		    	width: 50rpx;
		    	height: 50rpx;
		    	text-align: center;
		    	line-height: 50rpx;
		    }
		    .change-button text {
		      margin-right: 5px; /* 图标与文本间距 */
		    }
		  }
		}
		.tags-container {
			//flex: 1;
			overflow-y: auto; /* 启用垂直滚动 */
		    display: flex;
		    flex-wrap: wrap; /* 允许换行 */
		    gap: 10rpx; /* 设置标签之间的间距 */
		    padding: 10rpx;
		    margin-top: 20rpx;
		    //background-color: #999;
		    box-sizing: border-box;
		    width: 100%; /* 容器宽度 */
			//margin-bottom: 10rpx;
			max-height: 400rpx;
		}
		
		.tag-item {
			//height: 50rpx;
		    flex: 0 1 auto; /* 不强制占满一行，允许根据内容大小自适应 */
		   // max-width: 150rpx; /* 设置最大宽度为 150rpx */
		    //background-color: gold;
		    display: flex;
		    align-items: center;
		    justify-content: center; /* 标签内容居中 */
		    padding: 5px 10px;
		    border: 1px solid #ccc;
		    border-radius: 30px;
		    margin: 5px;
		}
		/* 被选中的标签 */
		.tag-item.selected {
		  background-color: rgba(0, 0, 0, 0.1);  /* 变灰色 */
		 // color: #fff;  /* 文本颜色为白色 */
		}
		
	}

  }
  
  
  .search-results {
	  flex: 1;
	overflow-y: auto;
	  // background-color: #FF3B30;
    margin-top: 5px;
  }
  
  .search-results .tags-container {
	height: 100%;
	 // background-color: #FF3B30;
    /* 让查询标签一行行展示 */
    display: flex;
	flex-direction: column; /* 纵向布局 */
    
  }
  
  .search-results .tag-item {
	padding: 10rpx;
	box-sizing: border-box;
	//text-indent: 20rpx;
   display: flex;
   align-items: center;
   height: 70rpx;
   width: 100%;
   //justify-content: center; /* 标签内容居中 */
   // padding: 5px 10px;
   // border: 1px solid #ccc;
   //border-radius: 30px;
   margin: 5px;
  }
  
  .search-results .tag-item.selected {
    background-color: rgba(0, 0, 0, 0.1);
	//color: #ccc;
  }
  
  
  }
  /* 滑入效果 */
  .modal.slide-in {
    transform: translateY(0); /* 滑入 */
    opacity: 1; /* 完全可见 */
  }
  
  /* 滑出效果 */
  .modal.slide-out {
    transform: translateY(100%); /* 滑出 */
    opacity: 0; /* 完全透明 */
  }
.custom-navbar{
		.left {
			// background-color: red;
			position: absolute;
			left:  0;
			height:100rpx;
			width: 100rpx;
			display: flex;
			align-items: center;
			justify-content: center;
		  //background-color: red;
		  .iconfont{
		    color: #000;
			font-size: 40rpx;
			width: 50%;
			height: 100rpx;
			text-align: center;
			line-height: 100rpx;
			 // background-color: black;
		  }
		}
		padding-top: var(--status-bar-height);
		z-index: 9999;
		font-size: 1.2rem;
		height: 100rpx;
		width: 100%;
		//background-color: #e0e0e0;
		position: sticky;
		top: 0;
		//padding: 10rpx;
		 display: flex;
		  justify-content: center;
		  align-items: center;
		  border-bottom:1rpx solid  #ccc;
		  
		  .center{
			  color: #000;
			  //font-weight:bold;
			  font-family: "楷体", "SimSun", "宋体", sans-serif;
		  }
	}
	.content{
		 
	  	 flex: 1; // 使内容区域占据剩余空间
		 display: flex;
		flex-direction: column; // 确保子元素垂直排列
		 overflow-y: auto;
	  	//background-color:  #e0e0e0;
		//background-color: white;
		
		.header {
			display: flex;
			justify-content: space-between;
			//align-items: center; // 垂直居中
			//width: 100%;
			height: 140rpx;
			padding: 20rpx; // 内边距
			//background-color: #fff; // 背景色
			border-bottom: 1rpx solid #ccc; // 下边框
			
				.title {
					text-indent: 10px; // 首行缩进 20px（根据需要调整）
					//background-color: red; // 标题背景色
					flex: 1; // 允许根据内容自适应宽度
					padding: 5rpx;
					height: auto; // 高度自适应
					font-size: 16px; // 标题字体大小
					//line-height: 20px;
					color: #333; // 标题颜色
					overflow-y: auto;
					 overflow-wrap: break-word; // 强制换行
					margin-right: 20rpx;
				}
			
			.cover {
				background-color:  #e0e0e0;
				width: 220rpx; // 封面宽度
				height: 120rpx; // 封面高度
				border-radius: 8px; // 圆角
				display: flex;
				flex-direction: column; // 确保子元素垂直排列
				align-items: center;
				padding: 10rpx;
				position: relative;
				//margin-right: 30rpx;
				.iconfont{
				  color: #000;
				  font-size: 40rpx;
				  width: 50%;
				  height: 60rpx;
				  text-align: center;
				  line-height: 60rpx;
							 // background-color: black;
				}
				.cover-image {
				    position: absolute; /* 设置为绝对定位 */
				    top: 0;
				    left: 0;
				    width: 100%; /* 使图片宽度占满容器 */
				    height: 100%; /* 使图片高度占满容器 */
				    object-fit: cover; /* 保持图片的纵横比并裁剪 */
				}
				.clear-icon-bg{
					position: absolute;
					z-index: 10;
					width: 40rpx;
					height: 40rpx;
					top: 0;
					right: 0;
					background-color: rgba(0, 0, 0, 0.6);
					 border-bottom-left-radius: 20rpx; /* 左下角圆角 */
					   // border-top-right-radius: 20rpx; /* 右上角圆角 */
					    display: flex; /* 使其子元素居中 */
					    justify-content: center; /* 水平居中 */
					    align-items: center; /* 垂直居中 */
				}
				.clear-icon {
					
				  //  position: absolute; /* 设置为绝对定位 */
				    top: 0rpx; /* 距离顶部 */
				    right: 0rpx; /* 距离右侧 */
				    //font-size: 20px; /* 字体大小 */
				    color: whitesmoke; /* "x" 的颜色 */
				    cursor: pointer; /* 鼠标指针样式 */
				   // z-index: 10; /* 确保在最上层 */
				}
			}
		}
		.blog-description{
			//background-color: red;
			display: flex; /* 使用flex布局 */
			flex-direction: column; /* 垂直排列 */
			position: relative;
			align-items: center;
			padding: 20rpx;
			.settings-title{
				margin-bottom: 10rpx;
			}
			.description-text{
				border: 1rpx solid rgba(0, 0, 0, 0.1);
				padding: 20rpx;
				font-size: 14px;
			}
			.description-length{
				font-size: 14px;
				//color: #ccc;
				position: absolute;
				bottom: 20rpx;
				right:40rpx ;
			}
		}
		
		.cover-settings,.article-type-selector {
		   // margin-top: 20px; /* 与上方内容的间距 */
		   // width: 100%; /* 设置宽度为100% */
		    display: flex; /* 使用flex布局 */
		    flex-direction: column; /* 垂直排列 */
			
		}
		
		.reprint-url {
		   // margin-top: 10px; /* 与其他内容的间距 */
		}
		
		.reprint-url-row {
			padding: 20rpx;
		    display: flex; /* 使用flex布局 */
		    align-items: center; /* 垂直居中对齐 */
		}
		.color-dot {
		    width: 10px; /* 点的宽度 */
		    height: 10px; /* 点的高度 */
		    background-color:  #ff6a00; /* 点的颜色 */
		    border-radius: 50%; /* 圆形 */
		    margin-right: 10px; /* 点与标题之间的间距 */
		}
		// .reprint-url-row  {
		//     margin-right: 10px; /* 橘色点与文本的间距 */
		// }
		
		.reprint-url-row input {
			font-size: 16px;
		    margin: 0 10px; /* 文本与输入框的间距 */
		    flex: 1; /* 输入框占据剩余空间 */
			border-bottom: 1rpx solid rgba(0, 0, 0, 0.1);
			
		}
		.iconfont{
		margin-right: 10rpx;
			//background-color: red;
		  color: #000;
		  font-size: 40rpx;
		  width: 40rpx;
		  height: 40rpx;
		  text-align: center;
		  line-height: 40rpx;
		 // background-color: black;
		}
		
		.settings-row {
		    display: flex; /* 使用flex布局 */
			height: 50rpx;
			padding: 20rpx;
		    justify-content: space-between; /* 左右两侧对齐 */
		    align-items: center; /* 垂直居中对齐 */
		   // width: 100%; /* 确保占满一行 */
			//background-color: red;
			.color-dot {
			    width: 10px; /* 点的宽度 */
			    height: 10px; /* 点的高度 */
			    background-color:  #ff6a00; /* 点的颜色 */
			    border-radius: 50%; /* 圆形 */
			    margin-right: 10px; /* 点与标题之间的间距 */
			}
			.settings-title {
				//width: 100px;
				//line-height: 50rpx;
				//height: 50rpx;
				//background-color: #FF3B30;
			    font-size: 16px; /* 设置标题字体大小 */
			    color: #333; /* 设置标题颜色 */
				
			}
			
			.custom-radio-group {
				margin-left: 10px;
			    display: flex; /* 使用flex布局 */
			    gap: 10px; /* 选项间隔 */
			    flex-grow: 1; /* 使其占据剩余空间 */
				.custom-radio {
					font-size: 14px;
					display: flex;
					align-items: center;
					justify-content: center;
					border: 1rpx solid rgba(0, 0, 0, 0.3);
					width: 120rpx;
					height: 50rpx;
				    cursor: pointer; /* 鼠标指针样式 */
				   // padding: 10px; /* 添加内边距 */
				    border-radius: 20rpx; /* 圆角效果 */
				    transition: background-color 0.3s; /* 添加过渡效果 */
				}
				
				.custom-radio:hover {
					 border-color:  #ff6a00; /* 悬停时的边框颜色 */
				   // background-color: #f0f0f0; /* 悬停时的背景色 */
				}
				
				.selected-text {
					// border-color: orange; /* 悬停时的边框颜色 */
				    color:   #ff6a00; /* 选中时的文字颜色 */
				  //  font-weight: bold; /* 选中时加粗 */
				}
			}
		}
	}
	
	
	
	
	.tag-selector{
		//padding: 10rpx;
		display: flex;
		// justify-content: ;
		  justify-content: space-between; /* 左右两侧对齐 */
		  .settings-row {
		      display: flex; /* 使用flex布局 */
		  	height: 50rpx;
		  	padding: 20rpx;
		      justify-content: space-between; /* 左右两侧对齐 */
		      align-items: center; /* 垂直居中对齐 */
			  .color-dot {
			      width: 10px; /* 点的宽度 */
			      height: 10px; /* 点的高度 */
			      background-color:  #ff6a00; /* 点的颜色 */
			      border-radius: 50%; /* 圆形 */
			      margin-right: 10px; /* 点与标题之间的间距 */
			  }
			  .settings-title {
			  	//width: 100px;
			  	//line-height: 50rpx;
			  	//height: 50rpx;
			  	//background-color: #FF3B30;
			      font-size: 16px; /* 设置标题字体大小 */
			      color: #333; /* 设置标题颜色 */
			  	
			  }
			  
			  }
		.select-area {
			
		    display: flex; /* 使用flex布局 */
		    justify-content: space-between; /* 左右两侧对齐 */
		    align-items: center; /* 垂直居中对齐 */
		    padding: 10px; /* 内边距 */
		   // border: 1px solid #ccc; /* 边框 */
		    border-radius: 4px; /* 圆角效果 */
		    cursor: pointer; /* 鼠标指针样式 */
		}
		
		.placeholder-text {
			margin-right: 10rpx;
		    color: #999; /* 默认文本颜色 */
		}
		.icon-xiangyoujiantou{
			margin-right: 10rpx;
				//background-color: red;
			  color: #999;
			  font-size: 40rpx;
			  width: 40rpx;
			  height: 40rpx;
			  text-align: center;
			  line-height: 40rpx;
		}

	}
	
	.bottom-bar {
		position: fixed;
		bottom: 0;
		right: 0;
		left: 0;
	    display: flex;
	    justify-content: space-around; // 两个按钮均匀分布
	    padding: 10rpx;
	  //  background-color: #e0e0e0; // 底部背景色
		 border-top:1rpx solid  #ccc;
		//border-top: 1rpx solid #ccc;
	    border-top-left-radius: 15rpx; // 左上角圆角
	    border-top-right-radius: 15rpx; // 右上角圆角
	   // box-shadow: 0 -2rpx 5rpx rgba(0, 0, 0, 0.2); // 上方阴影效果
	    margin-bottom: 50rpx; // 距离底部的距离
	}
	
	.draft-button {
	    flex: 1; // 使按钮占据相同的空间
	    margin: 0 5rpx; // 按钮之间的间距
	    padding: 10rpx;
	    border: none;
	    border-radius: 30rpx;
	    font-size: 14px;
	    color: #000; // 保存草稿按钮文字颜色
	    background-color: #fff; // 保存草稿按钮背景为白色
	    box-shadow: 0 2rpx 3rpx rgba(0, 0, 0, 0.1); // 按钮阴影
	}
	
	.publish-button {
	    flex: 1; // 使按钮占据相同的空间
	    margin: 0 5rpx; // 按钮之间的间距
	    padding: 10rpx;
	    border: none;
	    border-radius: 30rpx;
	    font-size: 14px;
	    color: #fff; // 发布内容按钮文字颜色
	    background-color: #FF3B30; // 发布内容按钮的颜色
	    box-shadow: 0 2rpx 3rpx rgba(0, 0, 0, 0.1); // 按钮阴影
	}
}
</style>
